<template>
  <header class="header">
    <img src="../assets/logo1.png" alt="" srcset="">
    <nav>
      <ul>
        <li v-for="(item, index) in nav" :class="{ active: route.path === item.link }" :key="index">
          <RouterLink :to="item.link">{{ item.name }}</RouterLink>
        </li>
      </ul>
    </nav>
  </header>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

console.log('route', route.path)

const nav = [
  { name: 'Home', link: '/home' },
  { name: 'Product Overview', link: '/product-overview' },
  { name: 'Technology', link: '/technology' },
  { name: 'About Us', link: '/about' },
]

</script>

<style lang="less" scoped>
.header {
  display: grid;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 0 160px;
  grid-template-columns: max-content max-content;

  ul {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 60px;

    li {
      position: relative;
      display: flex;
      align-items: center;
      height: 100%;
      color: #333333;
      font-family: Arial, Arial;
      font-size: 21px;
      font-weight: normal;
    }

    li.active::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 36px;
      height: 22px;
      content: "";
      transform: translateX(-50%);
      background: url('../assets/nav-1.png');
      background-position: center;
      background-size: cover;
    }
  }

  nav {
    height: 100%;
  }
}
</style>